<template>
    <div class="box">
        <div class="content" ref="detailSC">
            <van-nav-bar

                :fixed="true"
                v-if="scrollTop > 100"
                title="商品 - 评价 - 详情"
                left-arrow
                @click-left="$router.back()"
                
            >
                <span>sassa</span>
                <template  #right>
                    <van-popover 
                        v-model="showPopover" 
                        :actions="actions"
                        trigger="click" 
                        @select="onSelect"
                        placement="bottom-end"
                        theme="dark"
                    >
                        <template #reference>
                            <van-icon  name="ellipsis" size="32"  />
                        </template>
                    </van-popover>
                </template>
            </van-nav-bar>

            <van-nav-bar
                :title="brand"
                left-arrow
                @click-left="$router.back()"
                
            >
                <template  #right>
                    <van-popover 
                        v-model="showPopover" 
                        :actions="actions"
                        trigger="click" 
                        @select="onSelect"
                        placement="bottom-end"
                        theme="dark"
                    >
                        <template #reference>
                            <van-icon  name="ellipsis" size="32"  />
                        </template>
                    </van-popover>
                </template>
            </van-nav-bar>
         
            <div class="my-swipe-div">
                <van-swipe class="my-swipe"  indicator-color="#1989fa" @change="onChange" :initial-swipe="index" >
                    <van-swipe-item v-for="(item,index) in banners" :key="index" @click="PreviewImage" >
                        <van-image :src="item" />
                    </van-swipe-item>
                    <template #indicator>
                        <div class="custom-indicator">{{ index + 1 }}/{{banners.length}}</div>
                    </template>
                </van-swipe>
                <van-button class="video-btn"  type="default" icon="play-circle"   @click="show = true" >{{time|timeFilter}}</van-button>
            </div>
            <div class="proname">
                <span class="priceP"><span>￥</span>{{Math.floor(originprice*discount / 10)}}<span>.00</span><del v-if="discount !== 10">￥{{originprice}}</del> </span>
                <span class="nameP"><van-tag type="danger">{{category}}</van-tag>{{proname}}</span>
                <p class="desc">
                    {{desc}}
                </p>
            </div>
            <div class="imgdiv" style="margin-top:20px"> 
                <img src="https://img0.baidu.com/it/u=3338467134,3576213986&fm=253&fmt=auto&app=138&f=GIF?w=400&h=400" alt="">
                <p>
                    <img src="https://img0.baidu.com/it/u=3338467134,3576213986&fm=253&fmt=auto&app=138&f=GIF?w=400&h=400" alt="">
                </p>
                <p>
                    <img src="https://img0.baidu.com/it/u=3338467134,3576213986&fm=253&fmt=auto&app=138&f=GIF?w=400&h=400" alt="">
                </p>
                <p>
                    <img src="https://img0.baidu.com/it/u=3338467134,3576213986&fm=253&fmt=auto&app=138&f=GIF?w=400&h=400" alt="">
                </p>
                <p>
                    <img src="https://img0.baidu.com/it/u=3338467134,3576213986&fm=253&fmt=auto&app=138&f=GIF?w=400&h=400" alt="">
                </p>
                <p>
                    <img src="https://img0.baidu.com/it/u=3338467134,3576213986&fm=253&fmt=auto&app=138&f=GIF?w=400&h=400" alt="">
                </p>
                <p>
                    <img src="https://img0.baidu.com/it/u=3338467134,3576213986&fm=253&fmt=auto&app=138&f=GIF?w=400&h=400" alt="">
                </p>
                <p>
                    <img src="https://img0.baidu.com/it/u=3338467134,3576213986&fm=253&fmt=auto&app=138&f=GIF?w=400&h=400" alt="">
                </p>
                <p>
                    <img src="https://img0.baidu.com/it/u=3338467134,3576213986&fm=253&fmt=auto&app=138&f=GIF?w=400&h=400" alt="">
                </p>
                <p>
                    <img src="https://img0.baidu.com/it/u=3338467134,3576213986&fm=253&fmt=auto&app=138&f=GIF?w=400&h=400" alt="">
                </p>
                <p>
                    <img src="https://img0.baidu.com/it/u=3338467134,3576213986&fm=253&fmt=auto&app=138&f=GIF?w=400&h=400" alt="">
                </p>
                <p>
                    <img src="https://img0.baidu.com/it/u=3338467134,3576213986&fm=253&fmt=auto&app=138&f=GIF?w=400&h=400" alt="">
                </p>
                <p>
                    <img src="https://img0.baidu.com/it/u=3338467134,3576213986&fm=253&fmt=auto&app=138&f=GIF?w=400&h=400" alt="">
                </p>
                <p>
                    <img src="https://img0.baidu.com/it/u=3338467134,3576213986&fm=253&fmt=auto&app=138&f=GIF?w=400&h=400" alt="">
                </p>
                
            </div> -->
           
            <!-- 随便放  都是点出来显现的 -->
            <van-overlay :show="show" @click="show = false" >
                <video class="v-deo" ref="time" controls  preload="auto" :src="srcVideo"></video>
            </van-overlay>
            <van-share-sheet
                v-model="showShare"
                title="立即分享给好友"
                :options="options"
                @select="onSelect2"
            />
        </div>
        <van-goods-action class="bottom-dd" v-if="issale === 1" >
            <van-goods-action-icon icon="chat-o" text="客服" dot @click="chat" />
            <van-goods-action-icon icon="cart-o" text="购物车" badge="5" @click="toCart" />
            <van-goods-action-icon icon="shop-o" text="店铺"  />
            <van-goods-action-button type="warning" text="加入购物车" @click="addCartFn" />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>

        <van-goods-action class="bottom-dd" v-else>
            <van-goods-action-icon icon="chat-o" text="客服" dot @click="chat" />
            <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
            <van-goods-action-icon icon="shop-o" text="店铺"  />
            <van-goods-action-button type="warning" text="商品已下架" />
    
        </van-goods-action>
    </div>
</template>

<script>
import { getDetail } from '../../api/detail.js'
import {addCart } from "../../api/cart.js"
import { NavBar , Icon , Popover , ShareSheet , Swipe, SwipeItem , Image ,ImagePreview , Overlay , Button , GoodsAction, GoodsActionIcon, GoodsActionButton , Tag, Toast} from 'vant';
import Vue from 'vue'

Vue.use(NavBar);
Vue.use(Popover);
Vue.use(Icon);
Vue.use(ShareSheet);
Vue.use(SwipeItem);
Vue.use(Swipe);
Vue.use(Image);
Vue.use(Overlay);
Vue.use(Button);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(Tag);
export default {
    data(){
        return{
            showPopover: false,
            actions: [
                { text: '去首页' , icon:'home-o' , path:'/home'}, 
                { text: '分享' , icon:'share-o' ,  }, 
                { text: '我的嗨购' , icon:'user-o' , path:'/user'  }
            ],
            showShare:false,
            options: [
                { name: '微信', icon: 'wechat' },
                { name: '微博', icon: 'weibo' },
                { name: '复制链接', icon: 'link' },
                { name: '分享海报', icon: 'poster' },
                { name: '二维码', icon: 'qrcode' },
            ],
            proid:'',
            banners:[],
            category:'',
            discount:0, // 折扣
            issale:0, // 是否在售卖
            originprice:0,
            proname:'',
            brand:'',
            desc:'',
            index:0,
            show:false,
            srcVideo:'https://jvod.300hu.com/vod/product/b7d6a338-8a4a-4dab-a7cf-151914f65bf7/3ac211671a5249cd84cd1949cf354d8b.mp4',
            time:0,
            scrollTop:0

        }
    },
    mounted(){
        // console.log(111);
        
        const proid = this.$route.params.proid
        getDetail(proid).then(res => {
            console.log(res);
           
            const data = res.data.data
            const banners = res.data.data.banners[0]
            this.banners = banners.split(',')
            this.proname = data.proname
            this.proid = data.proid
            this.category = data.category
            this.discount = data.discount
            this.issale = res.data.data.issale
            this.originprice = data.originprice
            this.desc = data.desc
            this.brand = data.brand
            this.time = this.$refs.time.duration
            console.log(this.$refs.time.duration);
        })
        console.log(this.$refs);
        this.$refs.detailSC.addEventListener('scroll' , () => {
            this.scrollTop  =  this.$refs.detailSC.scrollTop
            // console.log(this.$refs.detailSC.scrollTop);
        })       
    },
    filters:{
        timeFilter (val) {
            let a = Math.floor(val/60)
            let b = Math.floor(val%60)
            a = a < 10 ? '0' + a : a
            b = b < 10 ? '0' + b : b
            return a +"'"+ b + '"'
        },
        priceFilter (val) {
            return val + '.00'
        }
    },
    methods:{
        onSelect(action) {
            console.log(action);
            if(action.path === '/home'){
                this.$router.push(action.path)
            }else if(action.path === '/user'){
                this.$router.push(action.path)
            }else if(action.text === '分享'){
                this.showShare = true
            }
        },
        onSelect2(action) {
            console.log(action.name);
            this.showShare = false;
        },
        onChange(index) {
            console.log(index);
            this.index = index;
        },
        PreviewImage(){
            ImagePreview({
            images:this.banners,
            startPosition: this.index,
            onChange:(index) => {
                // console.log(index);
                this.index = index
            }
            });
        },
        chat () {
            window._MEIQIA('metadata', {
                name: '张津曦', // 美洽默认字段
                address: '吧啦吧啦吧啦', // 美洽默认字段
                sex: '男', // 自定义字段
                hobby: '女' // 自定义字段
            })
            window._MEIQIA('showPanel')
        },
        toCart(){
            //  进入详情时时首页 ，  跳转到购物车 tarbar图标还是首页在亮着  把APP。vue的tarbar变量 active写成全局状态太即可修改
            this.$router.push('/cart')
        },
        addCartFn(){
            const userid = localStorage.getItem('userid')
            const loginState = localStorage.getItem('loginState') === 'true'
            if(loginState){
                  // 前端校验为登录状态，接下来后端校验
                addCart({userid , proid:this.proid , num:1}).then(res => {
                    if(res.data.code !== '10119'){
                        Toast('加入购物车数据')
                    }else{
                           // 前端校验为未登录状态
                        this.$router.push('/login')
                    }
                })
            }
        }
      
       
    },
    watch:{
        show(newVal) {
            if(newVal){
                this.$refs.time.currentTime = 0  // 暂停时播放时间清除 下次再点进去从头开始
                this.$refs.time.play()   // 点开时播放
            }else{
                this.$refs.time.pause()  // 点击关掉遮罩层时 暂停播放
        
            }
            // newVal ? this.$refs.time.play() : this.$refs.time.pause()
        }
    }
    
}
</script>

<style lang='stylus' scoped>
.my-swipe-div{
    position relative
}
     
.my-swipe .van-swipe-item {
    width: 3.3rem
    height: 3.3rem
    color: #fff;
    font-size: 20px;
    line-height: 1.65rem;
    text-align: center;
    .van-image{
        width: 100%
        height: 100%
        img {
            width: 100%
            height: 100%
        }
    }
  
}
.custom-indicator {
    position: absolute;
    right: 0;
    bottom: 50px;
    width: 45px
    height: 15px
    text-align: center
    font-size: 13px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px 0 0 10px
}
.content{
    background-color: #D3D3D3
}
.video-btn{
    width: 0.83rem
    height: 0.30rem
    border-radius: 30px
    position: absolute
    bottom 20px
    background:#f5f5f5;
    left: 1.55rem
    font-size: 10px
    i{
        font-size: 25px
        color: #f66
    }
}
.v-deo{
    width: 100%
    position: fixed
    top:50%
    transform: translateY(-50%)
}
.bottom-dd{
    position relative
}
.imgdiv{
    width: 100%
    img{
        width:100%
    }
}
.proname{
    border-radius: 0 0  20px 20px
    overflow: hidden
    // height: 1.5rem
    background-color: #fff
    padding: 0 20px
    .nameP{
        display: block
        font-weight: 600
        font-size: 16px
    }
    .desc{
        font-size: 13px
    }
    .priceP{
        margin-top: 10px
        display: block
        // line-height: 0
        color: #cc0000
        font-size: 28px
        span{
            font-size: 16px

        }
    }
}
del{
    margin-left: 5px
    font-size: 15px
    color: black
}

</style>